<template>
    <div class="container">
        <div class="rent-header">
            <div class="headers">
                <span @click="add">&lt;</span>
                <h3>确认订单</h3>
                <img src="../assets/img/1.png" alt="">


            </div>
            <van-notice-bar color="#af7174" background="#ecf9ff" left-icon="info-o">
                “开四停四”规则已生效，限行日期内部分分路段禁止行驶
            </van-notice-bar>
        </div>
        <div class="rent-main" v-if="rent">
            <div class="mains">
                <div class="carimg">
                    <img :src="rent.carimg" alt="">
                </div>
                <div class="title">
                    <p>{{ rent.carname }}</p>
                    <span>{{ rent.plate }}</span>
                    <em>不限里程</em>
                </div>
            </div>
            <div class="times">
                <van-cell title="选择租用时间" :value="date" @click="show = true" />
                <van-calendar v-model="show" type="range" @confirm="onConfirm" />
            </div>
            <div class="many" >
                <p>车辆租金</p>
                <strong>{{ rent.manys }}元</strong>
            </div>
        </div>
        <div class="selt-help">
            <h5>自助取还</h5>
            <div class="location">
                <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区"
                    @click="shows = true" />
                <van-popup v-model="shows" round position="bottom">
                    <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="shows = false"
                        @finish="onFinish" />
                </van-popup>
            </div>
        </div>
        <div class="selt-disposition">
            <div class="disposition-top">
                <h5>车辆配置</h5>
                <span>&gt;</span>
            </div>
            <div class="title">
                <p>车辆</p>
                <p>排量</p>
                <p>动力：汽油</p>
            </div>
            <div class="old">
                <p>2-3年</p>
                <p>1.5T</p>
                <p>95(97)号汽油</p>
            </div>
            <div class="titles">
                <p>容量</p>
                <p>座椅</p>
                <p>车辆购置价</p>
            </div>
            <div class="old">
                <p>66L</p>
                <p>5位</p>
                <p>319800元</p>
            </div>
        </div>
        <div class="rent-foot">
            <div class="footers">
                <div class="many">
                    <p>租车费用</p>
                    <span>{{num}}</span>
                </div>
                <div class="bottons">
                    <button @click="tijiao()">提交订单</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getLoveCar } from '@/api/lovecar';

export default {
    data() {
        return {
            date: '',
            show: false,
            fieldValue: '',
            cascaderValue: '',
            shows: false,
            rent: null,
            dingdan:[],
            data:"",
            num:0,
            // 选项列表，children 代表子选项，支持多级嵌套
            options: [
                {
                    text: '浙江省',
                    value: '330000',
                    children: [{ text: '杭州市', value: '330100' }],
                },
                {
                    text: '江苏省',
                    value: '320000',
                    children: [{ text: '南京市', value: '320100' }],
                },
            ],
        }
    },
    methods: {

        formatDate(date) {
            return `${date.getMonth() + 1}/${date.getDate()}`;
        },
        onConfirm(date) {
            const [start, end] = date;
            this.show = false;
            this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
            // console.log((end-start)/(24*60*60*1000));
            this.data = ((end-start)/(24*60*60*1000))
            console.log(this.data);
            this.num = Number(this.data) * this.rent.manys
        },
        // 全部选项选择完毕后，会触发 finish 事件
        onFinish({ selectedOptions }) {
            this.shows = false;
            this.fieldValue = selectedOptions.map((option) => option.text).join('/');
        },
        add() {
            this.$router.go(-1);
        },
        // 提交订单
        tijiao() {
            if(this.num != 0){
                this.rent.money = this.num
                this.dingdan.push(this.rent)
                console.log(this.dingdan);
                window.localStorage.setItem("tijiao",JSON.stringify(this.dingdan))
                this.$router.push("/bill");
                this.$toast("提交成功")
            }
        },

        getrentFun(){
            getLoveCar({id:this.$route.query.id}).then(data=>{
                console.log(data);
                let index = data.lovecar.findIndex(item=>item.carid==this.$route.query.id)
                this.rent = data.lovecar[index]
                console.log(this.rent);
            }) 
        }




    },
    created(){
        if(localStorage.tijiao){
            this.dingdan = JSON.parse(localStorage.getItem("tijiao"))
        }
        
        if("id" in this.$route.query){
            this.getrentFun();
        }
       
    },

}



</script>

<style lang="scss" scoped>
.rent-header {
    width: 100%;
    margin-top: 15px;

    .headers {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            font-size: 20px;
            font-weight: 600;
            font-family: "仿宋";
        }

        h3 {
            font-weight: 400;
        }

        img {
            width: 20px;
            height: 20px;
        }
    }

    .van-notice-bar {
        width: 85%;
        margin: 0 auto;
        border-radius: 10px;
        height: 30px;
        font-size: 12px;
        margin-top: 15px;
    }
}

.rent-main {
    width: 90%;
    margin: 10px auto;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    padding: 10px;


    .mains {
        width: 100%;
        margin: 0 auto;
        display: flex;
        border-bottom: 1px solid #eee;
        padding-bottom: 12px;
        margin-top: 12px;

        .carimg {
            width: 80px;
            height: 60px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .title {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            line-height: 20px;
            margin-left: 10px;

            p {
                font-size: 14px;
            }

            em {
                font-style: normal;
            }

        }
    }

    .times {
        .van-cell {
            border-bottom: 1px solid #eee;
            padding: 10px 0px;
        }
    }

    .many {
        display: flex;
        justify-content: space-between;
        
        padding: 15px 0;
        border-bottom: 1px solid #eee;

        p {
            font-size: 14px;
        }
    }
}

.selt-help {
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px #eee;
    padding: 10px;

    h5 {
        margin-top: 12px;

    }

    .location {
        display: flex;
        margin-top: 20px;
        font-size: 13px;
        justify-content: space-between;
        align-items: center;

        .van-cell--clickable {
            padding: 0;
        }
    }
}
.selt-disposition{
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0 10px;
    margin-top: 10px;
    padding-bottom: 15px;
    .disposition-top{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        span{
            font-family: "仿宋";
            font-weight: 600;
        }
    }
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        margin-top: 20px;
        font-weight: 600;
    }
    .old{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        margin-top: 15px;
    }
    .titles{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        margin-top: 15px;
        font-weight: 600;
    }
}

.rent-foot {
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    padding: 13px 0;
    box-shadow: 0 0 20px #eee;

    .footers {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .many {
            display: flex;
            align-items: center;
            span {
                font-size: 15px;
                color: #da5a56;
                margin-left: 5px;
            }
        }

        .bottons {
            button {
                width: 115px;
                height: 40px;
                border-radius: 20px;
                border: none;
                font-size: 14px;
                text-align: center;
                line-height: 40px;
                color: #fff;
                background-color: #5dcd96;
            }
        }
    }
}
</style>